<script setup>
import { ref } from 'vue'
import {useWebsiteStore} from '@/store/websiteStore'
import { useRoute } from 'vue-router'

const route = useRoute()
const websiteStore = useWebsiteStore()
const url = ref('')
const isSubmit = ref(false)
// 添加
const handleAddClick = async () => {
  isSubmit.value = true
  let result = await myApi.sendURL(url.value)
  if(result.msg){
    myApi.alert(result.msg)
    isSubmit.value = false
    return
  }
  if(route.path === '/imageGallery'){
    alert('添加成功,请前往网页收藏页查看')
  }else{
    alert('添加成功')
  }
  websiteStore.addWebsite(result)
  isSubmit.value = false
  url.value = ''
  websiteStore.setIsShow(false)
}
// 取消
const handleCancelClick = () => {
  websiteStore.setIsShow(false)
  url.value = ''
}
</script>

<template>
 <div class="dialog-wrap" v-if="websiteStore.isShow">
  <div class="content">
    <div class="input">
      <input type="text" v-model="url" placeholder="请输入网址..." @keyup.enter="handleAddClick" :disabled="isSubmit" spellcheck="false">
    </div>
    <div class="btns">
      <button @click="handleAddClick" :disabled="isSubmit">添加</button>
      <button @click="handleCancelClick()" :disabled="isSubmit">取消</button>
    </div>
  </div>
 </div>
</template>

<style scoped lang="stylus">
.dialog-wrap
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0, 0.8)
  display flex
  justify-content center
  align-items center
  z-index 1000
  .content
    width 100%
    padding 0 20px
    input
      height 30px
      width 100%
      outline none
      margin-bottom 10px
      font-size 12px
    .btns
      button
        height 30px
        margin-right 10px
        font-size 12px
        padding 0 20px
</style>